<template>
  <div
    class="flex flex-direction justify-center align-center"
    :class="[isFix ? 'fullImage' : 'notFullImage']"
    :style="
      'background-image: url(' +
      bgParams.bgimg +
      ');height:' +
      bgParams.height +
      'vh;'
    "
  >
    <p class="content" v-if="isHome">{{ bgParams.title }}</p>
    <p class="text" v-if="isHome">
      <span v-html="wrods"></span
      ><span :class="starblink ? 'starblink' : ''">|</span>
    </p>
  </div>
</template>

<script>
import Typing from "@/libs/typewrite";
export default {
  props: {
    isFix: {
      type: Boolean,
      default: false,
    },
    bgParams: {
      type: Object,
      default: function () {
        return {
          height: 64,
          bgimg:
            "https://gitee.com/lovestarboy/figurebed/raw/master/image/bg.jpg",
          title: "",
          text: "",
        };
      },
    },
  },
  data() {
    return {
      typeText: "",
      wrods: "",
      typeObj: null,
      starblink: false,
      isHome: true,
    };
  },
  watch: {
    typeObj: {
      handler(val, oldVal) {
        this.wrods = val.str;
        this.starblink = val.blink;
      },
      deep: true,
    },
  },
  mounted() {
    this.typeText = this.$props.bgParams.text;
    this.typeObj = new Typing(this.typeText);
    if (this.$route.path == "/") this.isHome = false;
  },
  beforeDestroy() {
    this.typeObj.destroy();
    this.typeObj = null;
  },
  methods: {},
};
</script>
<style lang='scss' scoped>
.fullImage {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  background-size: cover;
}
.content {
  color: #fff;
  font-size: 3rem;
  line-height: 1.85em;
  margin-bottom: 20px;
  position: relative;
  font-family: MV Boli;
  z-index: 2;
}
.text {
  color: #fff;
  font-size: 1rem;
  position: relative;
  z-index: 2;
}
.notFullImage {
  position: relative;
  width: 100%;
  background-size: cover;
}
.notFullImage::after,
.fullImage::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba(0, 0, 0);
  opacity: 0.3;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.text {
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
}
.starblink {
  animation: blink 1.2s infinite steps(1, start);
}

@keyframes blink {
  0%,
  100% {
    color: #fff;
  }
  50% {
    color: transparent;
  }
}
</style>